<template>
  <div class="list-container">
    <div class="nav-space">
      <van-nav-bar fixed
                   title="审核记录"
                   left-arrow
                   @click-left="$router.go(-1)"></van-nav-bar>
    </div>
    <div class="scroll-outer"
         ref="wrapper">
      <div class="scroll-inner">
        <van-skeleton :row="3"
                      v-for="i in skeletonRepeat"
                      :key="i"
                      :loading="skeletonLoading">
          <div class="step"
               v-if="logs.length > 0">
            <div v-for="(item, index) in logs"
                 :key="index"
                 class="step-wrap">
              <div class="title">{{item.checkStatus}}</div>
              <div class="subtitle">
                <div class="check-info"
                     v-if="item.checkInfo">审核意见： {{item.checkInfo}}</div>
                <div class="check-content">
                  <span>{{item.checkDate}}</span>
                  <span>审核人: {{item.checker}}</span>
                </div>
              </div>
              <div class="circle-container">
                <img :src="activeIcon(item.checkState)" />
              </div>
              <div class="line"
                   :class="index === logs.length - 1 ? 'last' : ''"></div>
            </div>
          </div>
          <div v-else>

            <!-- 空状态 -->
            <van-empty description="暂无审核记录">
              <template #image>
                <div class="empty-image">
                  <img src="/images/detail/icon_empty.png" />
                </div>
              </template>
            </van-empty>
          </div>
        </van-skeleton>
      </div>
    </div>
  </div>
</template>

<script>
import { getCheckLog } from '@/api/request/business'
import { reactive, onMounted, toRefs, computed, nextTick, ref } from 'vue'
import usebScroll from '@/hooks/usebScroll'
import { getSkeletonInstance } from '@/hooks/useSkeleton'

const logo = {
  pass: 'images/audit/icon_audit_success_icon.png',
  refuse: 'images/audit/icon_audit_faild_icon.png',
  tovoid: 'images/audit/icon_audit_uncheck_icon.png'
}
export default {
  props: {
    beanId: {
      require: true,
      type: String
    },
    id: {
      require: true,
      type: String
    },
  },
  setup (props) {
    const state = reactive({
      logs: []
    })
    const $scroll = usebScroll()
    const wrapper = ref('wrapper')
    const { skeletonLoading, skeletonRepeat, hideSkeleton, narrowSkeleton } = getSkeletonInstance({ skeletonRepeat: 8 })
    onMounted(() => {
      getCheckLog({ beanId: props.beanId, id: props.id }).then(response => {
        narrowSkeleton()
        state.logs.push(...response.body.data.item)
        hideSkeleton()
        nextTick(() => {
          $scroll.initOrRefreshBScroll(wrapper.value)
        })
      })
    })

    const activeIcon = computed(() => {
      return (checkstate) => {
        if (state.logs.length > 0) {
          const lo = logo[checkstate]
          return logo[checkstate]
        }
        return ''
      }
    })

    return {
      ...toRefs(state),
      activeIcon,
      wrapper,
      skeletonLoading,
      skeletonRepeat
    }
  }

}
</script>

<style scoped>
.audit-step-title {
  line-height: 34px;
  color: #222;
  font-size: 14px;
  font-weight: bold;
}
::v-deep(.van-skeleton__content) {
  padding: 12px;
}
.step-wrap {
  width: 90%;
  position: relative;
  min-height: 56px;
  padding: 22px 0 0 10px;
  border-bottom: 1px solid #f5f5f5;
}

.line {
  height: 100%;
  background: #ccc;
  position: absolute;
  width: 1px;
  top: 49px;
  left: -19px;
}

.line.last {
  width: 0;
}
.step {
  padding: 20px 0 0 50px;
  font-size: 15px;
}

.circle-container {
  position: absolute;
  left: -32px;
  top: 19px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
}
.title {
  color: #4e4e4e;
}

.scroll-outer {
  height: calc(100vh - 44px);
  overflow: hidden;
}

.check-info {
  color: #999;
  font-size: 12px;
  line-height: 20px;
}

.check-content {
  color: #ccc;
  font-size: 12px;
  line-height: 20px;
}
</style>